<template>
  <div class="perinfo">
    <!-- 头部 -->
    <div class="my_header">
      <i class="mui-icon mui-icon-arrowleft" aria-hidden="true" @click="gocenter"></i>
      <div class="top1">个人资料</div>
    </div>
    <!-- 头像 -->
    <div class="picture">
      <span>头像</span>
      <div class="pic">
        <input type="file" name="" id="aa" @change="preview" accept="image/*">
        <img class="img1" v-bind:src="ziliao.head_img" id="LAY_demo_upload">
        <img class="img2" src="static/imgs/icon_more.png" alt="">
      </div>
    </div>
    <!-- 表单内容 -->
    <form class="mui-input-group">
      <div class="mui-input-row">
        <label>昵称</label>
        <input type="text" class="mui-input-clear" v-model="ziliao.nick_name" placeholder="请输入您的昵称">
      </div>
      <div class="mui-input-row">
        <label>姓名</label>
        <input type="text" v-bind:readonly="isReadOnly" class="mui-input-clear" v-model="ziliao.name"
               placeholder="请输入您的真实姓名">
      </div>
      <div class="mui-input-row sex" @click="opensex">
        <label>性别</label>
        <input type="text" readonly="readonly" v-model="ziliao.sex" class="mui-input-clear" placeholder="请选择性别">
        <img class="img2" src="static/imgs/icon_more.png" alt="">
      </div>

      <van-popup v-model="show1" position="bottom" :overlay="false">
        <van-picker show-toolbar :columns="columns" @cancel="onCancel" @confirm="onConfirm2"/>
      </van-popup>
      <div class="mui-input-row" @click="opentime">
        <label>出生年月</label>
        <input type="text" readonly="readonly" v-model="ziliao.birthday" class="mui-input-clear" placeholder="请选择">
      </div>
      <van-popup v-model="show" position="bottom" :overlay="false">
        <van-datetime-picker v-model="currentDate" type="date" @cancel="onCancel" @confirm="onConfirm"
                             :min-date="new Date(1971,1,1)" :max-date="new Date()"/>
      </van-popup>
      <div class="mui-input-row">
        <label>职位</label>
        <input type="text" class="mui-input-clear" v-model="ziliao.position" placeholder="请输入您的职位">
      </div>
      <div class="mui-input-row">
        <label>所在地区</label>
        <!--<input type="text" class="mui-input-clear" readonly="readonly" placeholder="请选择">-->
        <el-cascader style="text-align: right;float:right;" id="area" :options="options" :placeholder='address'
                     v-model="selectedOptions" @change="handleChange">
        </el-cascader>
      </div>

    </form>
    <div class="button">
      <button class="btn" @click="saveziliao">保 存</button>
    </div>
  </div>
</template>

<script>
  import {formatDate} from "../../../static/js/date.js";

  export default {

    data() {
      return {
        options: [],
        show: false,
        show1: false,
        shows: false,
        columns: ['男', '女'],
        ziliao: {
          token: '',
          nick_name: '',
          name: '',
          sex: '',
          birthday: '',
          position: '',
          province_id: '',
          city_id: '',
          head_img: ''

        },
        currentDate: new Date(),

        selectedOptions: [],
        address: '',
        isReadOnly: false

      };
    },

    created: function () {
      var that = this;
      that.ziliao.token = localStorage.getItem("token");
      //获取省市数据

      //获取省市数据
      $.ajax({
        url: 'http://zcapi.hrgsxt.cn/api/Welcome/province',
        type: 'get',
        data: {},
        processData: false,
        contentType: false,
        success: function (data) {
          console.log(JSON.parse(data).data);
          that.options = JSON.parse(data).data;
        }
      });
      //获取资料
      $.ajax({
        type: "get",
        url: "http://zcapi.hrgsxt.cn/api/User_data/info",
        data: {
          token: localStorage.getItem("token")
        },
        cache: false,
        dataType: "json",
        success: function (data) {

          console.log(JSON.stringify(data.data) + "获取资料");
          if (data.code == 200) {
            console.log(that.ziliao.nick_name + "ahah");
            that.ziliao.nick_name = data.data.nick_name,
              that.ziliao.name = data.data.name,
              that.ziliao.sex = data.data.sex,
              that.ziliao.birthday = data.data.birthday,
              that.ziliao.head_img = data.data.head_img,
              that.ziliao.position = data.data.position,
              that.address = data.data.province + "-" + data.data.city,
              that.selectedOptions.push(data.data.province_id),
              that.selectedOptions.push(data.data.city_id),
              console.log(that.ziliao.selectedOptions + "诋毁");

          } else {

            that.$toast({
              message: data.message,
              duration: 1000
            })
          }

        }
      });
      that.getusertype();
    },
    // 在 `methods` 对象中定义方法
    methods: {

      //获取用户类型
      getusertype() {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/User/index",
          data: {
            token: localStorage.getItem("token")
          },
          cache: false,
          dataType: "json",
          success: function (data) {

            console.log(JSON.stringify(data) + "进123");
            if (data.code == 200) {
              if (data.data.type == 2) {
                that.isReadOnly = true
              } else {
                that.isReadOnly = false
              }

            }

          }
        });
      },
      gocenter() {
        var that = this;
        $.ajax({
          type: "get",
          url: "http://zcapi.hrgsxt.cn/api/User/index",
          data: {
            token: localStorage.getItem("token")
          },
          cache: false,
          dataType: "json",
          success: function (data) {
            if (data.code == 200) {
              that.type = data.data.type;
              console.log(data.data.type + "用户类型");
              if (data.data.type == 1) {
                that.$router.push({
                  path: './Personalcenter',

                });

              } else if (data.data.type == 2) {

                that.$router.push({
                  path: './corporatecenter',

                });
              }
            }

          }
        });
      },

      handleChange(value) {
        var that = this;
        that.ziliao.province_id = value[0];
        that.ziliao.city_id = value[1];
        console.log(value[1]);
      },
      onConfirm() {
        console.log(this.currentDate);
        this.show = false;
        var time = this.formatDate(this.currentDate);
        this.ziliao.birthday = time;
      },

      onConfirm2(value, index) {
        this.ziliao.sex = `${value}`;
        this.show1 = false;
      },
      formatDate(time) {
        var date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd');
      },
      onCancel() {
        this.show1 = false;
        this.show = false;
        console.log(this.show);
      },
      opensex() {
        this.show1 = true
      },
      opentime() {
        this.show = true
      },
      //			//打开地址弹框
      //			openaddress() {
      //				this.shows = true
      //			},
      //			onConfirm1(e) {
      //
      //				this.shows = false;
      //			},

      onCancel1() {
        this.shows = false;
        console.log(this.shows);
      },
      handleChange(value) {
        var that = this;
        that.ziliao.province_id = value[0];
        that.ziliao.city_id = value[1];
        console.log(value[1]);
      },
      onChange(picker, value, index) {
        console.log(value);
        console.log(index);
      },
      chongzhi() {
        var that = this;
        that.ziliao.nick_name = '',
          that.ziliao.name = '',
          that.ziliao.sex = '',
          that.ziliao.birthday = '',
          that.ziliao.position = '',
          that.ziliao.province_id = '',
          that.ziliao.city_id = '',
          that.ziliao.head_img = '',
          that.address = "",
          that.selectedOptions = []
      },
      //编辑个人资料
      saveziliao() {
        var that = this;
        var obj = that.ziliao;
        console.log(JSON.stringify(obj) + "保存数据");
        $.ajax({
          type: "post",
          url: "http://zcapi.hrgsxt.cn/api/User_data/edit",
          data: obj,
          cache: false,
          dataType: "json",
          success: function (data) {
            if (data.code == 200) {
              that.$toast({
                message: data.message,
                duration: 1500
              })
              setTimeout(function () {
                $.ajax({
                  type: "get",
                  url: "http://zcapi.hrgsxt.cn/api/User/index",
                  data: {
                    token: that.ziliao.token
                  },
                  cache: false,
                  dataType: "json",
                  success: function (data) {
                    console.log(data.data.type + "进来呀1");
                    if (data.code == 200) {
                      that.$router.push({
                        //path: './personcenter'
                        path: './nulls',
                        query: {
                          tabitem: 'Perinfo'

                        }
                      });

                    }

                  }
                });
              }, 1000)
            } else {
              that.$toast({
                message: data.message,
                duration: 1500
              })
            }

          }
        });
      },

      preview(file) {
        var that = this;
        console.log(file.target.files[0]);
        var LAY_demo_upload = document.getElementById('LAY_demo_upload');
        if (file.target.files[0]) {
          var reader = new FileReader();
          reader.onload = function (evt) {
            // prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
            var formData = new FormData();
            console.log(file.target.files[0].size);
            if (file.target.files[0].size < 2000 * 1024) {
              formData.append("head_img", file.target.files[0]);
              $.ajax({
                url: 'http://zcapi.hrgsxt.cn/admin/Upload/index2',
                type: 'post',
                data: formData,
                processData: false,
                contentType: false,
                success: function (msg) {
                  $("#LAY_demo_upload").attr("src", JSON.parse(msg).data);
                  that.ziliao.head_img = JSON.parse(msg).data
                }
              });
            } else {
              that.$toast({
                message: "图片超出上传限制！",

              });
            }
          }
          reader.readAsDataURL(file.target.files[0]);
        }
      }
    },
    watch: {
      // 如果路由有变化，会再次执行该方法
      '$route': 'fetchData'
    }
  }

  //图片上传并预览

  //选择省市
</script>

<style>
  .sex img {
    width: .14rem;
    height: .24rem;
    margin-left: .15rem;
    top: 37%;
    right: 3%;
    position: absolute;
  }

  .sex input {
    padding-right: 0.5rem;
  }

  .perinfo #area {
    text-align: right !important;
  }

  .perinfo .el-cascader__label {
    text-align: right !important;
  }

  .perinfo .mui-input-row input {
    font-size: 0.26rem;
  }

  .perinfo .pic #aa {
    position: absolute;
    width: 100%;
    opacity: 0;
  }

  /* 头部 */

  .perinfo input {
    text-align: right;
  }

  .perinfo {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
  }

  .perinfo .my_header {
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    text-align: center;
    color: #fff;
    line-height: .88rem;
    position: relative;
    padding: 0 .3rem;
  }

  .perinfo .my_header i {
    font-size: .4rem;
    float: left;
    line-height: .88rem;
  }

  .perinfo .top1 {
    display: inline-block;
  }

  /* 头像 */

  .perinfo .picture {
    height: 1.4rem;
    line-height: 1.4rem;
    padding: 0 .3rem;
    background-color: #fff;
  }

  .perinfo .picture span {
    width: .58rem;
    height: .28rem;
    font-size: .3rem;
    font-weight: 500;
    color: #333;
  }

  .perinfo .picture .pic {
    float: right;
  }

  .perinfo .picture .img1 {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
  }

  .perinfo .picture .img2 {
    width: .14rem;
    height: .24rem;
    margin-left: .15rem;
  }

  /* 表单样式 */

  .perinfo .mui-input-row label {
    font-size: .3rem;
    color: #333;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
  }

  .perinfo .mui-input-group .mui-input-row:after {
    left: 0rem;
  }

  .perinfo .mui-input-group input:last-child {
    font-size: .26rem;
    color: #666;
    font-family: PingFang-SC-Medium;
  }

  /* .mui-input-row label~input {
    width: 72%;
} */
  /* .mui-input-group .mui-input-row {
    height: .88rem;
} */

  .perinfo #date {
    color: #666;
  }

  /* 提交按钮 */

  .perinfo .button {
    text-align: center;
    background-color: #fff;
    color: #FFFFFF;
    margin-top: 0.5rem;
  }

  .perinfo .btn {
    width: 93%;
    height: .88rem;
    background: rgba(0, 133, 240, 1);
    border-radius: .15rem;
    margin-bottom: .5rem;
  }
</style>
